<template>
  <div class="">
    <p class="title-p">
      <span class="flLeft">找到约{{ mtableData.total }}条相关结果</span
      ><span class="flRight sort" @click="handleSort"
        >按时间排序<i class="el-icon-sort"></i
      ></span>
    </p>
    <el-card class="card">
      <p class="gxtj" v-if="menuType == '个性推荐'">个性推荐</p>
      <ul v-if="mtableData.result && mtableData.result.length > 0">
        <el-checkbox-group
          @change="handleCheckedItem"
          v-model="checkedList"
          :label="false"
          :false-label="true"
        >
          <li v-for="(item, index) in mtableData.result" :key="index">
            <el-checkbox
              @click.stop.native="() => {}"
              v-show="showCheckbox"
              class="checkboxItem"
              :label="item.id"
              ><span></span
            ></el-checkbox>
            <div class="liTitle">
              <p>
                <img class="title-img" src="@/assets/img/consult05.png" />
                <span
                  class="liTitle-title"
                  v-html="item.title"
                  @click="handleGoDetail(item)"
                ></span>
              </p>
              <!-- 收藏 -->
              <el-tooltip
                :content="!item.isCollection ? '收藏' : '取消收藏'"
                placement="top"
              >
                <a
                  class="collect"
                  :class="{
                    'el-icon-star-on': item.isCollection,
                    'el-icon-star-off': !item.isCollection,
                  }"
                  @click="handleCollect(item, index)"
                ></a>
              </el-tooltip>
            </div>
            <div class="txtContent" v-html="item.text"></div>
            <div class="keyWordWrap">
              <div class="lWrap flLeft">
                <el-tag v-if="item.source" type="warning">{{
                  shortWord(item.source)
                }}</el-tag>
                <el-tag v-if="item.pubdate" type="warning">{{
                  handleSplitTime(item.pubdate)
                }}</el-tag>
              </div>
              <div
                v-if="item.keywords && item.keywords.length > 0"
                class="rWrap flRight"
              >
                <el-tag
                  v-for="(it, index) in item.keywords"
                  :key="index"
                  class="keyWord"
                  >{{ it }}</el-tag
                >
              </div>
            </div>
          </li>
        </el-checkbox-group>
      </ul>
      <div class="no-data-search" v-if="!hasData && !loadingTable">
        <img src="../../../../assets/img/no-data-search.png" alt="" />
      </div>
      <loading1 v-if="loadingTable" emptyText="数据请求中..." />
      <!-- no-data -->
      <el-checkbox
        v-show="
          showCheckbox && mtableData.result && mtableData.result.length > 0
        "
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckboxAllchange"
      >
        全选
      </el-checkbox>
      <el-button
        v-if="showCheckbox && mtableData.result && mtableData.result.length > 0"
        type="primary"
        plain
        size="small"
        class="downloadReport"
        @click="downloadReport"
        >导出</el-button
      >
      <div
        class="paginationWrap"
        v-if="mtableData.result && mtableData.result.length > 0"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="getCurrentPage"
          :current-page.sync="curPage"
          :page-size="10"
          layout="prev,pager,next"
          :total="mtableData.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { deleteTag } from "@/utils/utils.js";
export default {
  props: [
    "menuType",
    "clickReport",
    "tableData",
    "loadingTable",
    "hasData",
    "sqlIndexType",
    "currentPage",
  ],
  components: {},
  data() {
    return {
      consultIdList: [], //处理后的ids
      checkAll: false, //默认全选关闭
      checkedList: [], //选中后的ids
      showCheckbox: false, //是否展示选择框
      isIndeterminate: false, //开启选框样式控制
      curPage: 1,
      timeSort: true, //时间排序
      mtableData: {},
    };
  },
  created() {},
  mounted() {
    this.mtableData = this.tableData;
  },
  watch: {
    currentPage: {
      handler: function(val) {
        this.curPage = val;
      },
      deep: true,
      immediate: true,
    },
    clickReport: {
      handler: function(val) {
        this.showCheckbox = this.clickReport;
        if (!val) {
          this.checkedList = [];
        }
      },
      immediate: true,
    },
    tableData: {
      handler: function(n, old) {
        this.mtableData = n;
        if (n.result && n.result.length > 0) {
          this.handleIds(this.mtableData.result);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleCollect(item, index) {
      if (item.isCollection) {
        this.$confirm("您确定取消收藏吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$delete(
            `${this.$Url.collect.collectionDelete}/${item.collectionId}`,
            {}
          ).then((res) => {
            this.$message({
              type: "success",
              message: "取消成功！",
            });
            this.$set(this.mtableData.result[index], "isCollection", false);
          });
        });
      } else {
        const param = {
          title: item.title,
          sourceId: item.id,
          sourceType: "NEWS",
        };
        param.title = deleteTag(param.title);
        param.userId = JSON.parse(localStorage.getItem("homeUserInfo")).id;
        this.$post(this.$Url.collect.collectionAdd, param).then((res) => {
          this.$message({
            type: "success",
            message: "收藏成功！",
          });
          this.$set(this.mtableData.result[index], "isCollection", true);
          this.$set(this.mtableData.result[index], "collectionId", res.data);
        });
      }
    },
    handleIds(list) {
      list &&
        list.map((item) => {
          this.consultIdList.push(item.esId);
        });
      // this.checkedList = this.consultIdList//开启默认全选
    },
    handleCheckboxAllchange(val) {
      this.checkedList = val ? this.consultIdList : [];
      this.isIndeterminate = false;
    },
    handleCheckedItem(val) {
      let checkCount = val.length;
      this.checkAll = checkCount === this.consultIdList.length;
      this.isIndeterminate =
        checkCount > 0 && checkCount < this.consultIdList.length;
    },
    downloadReport() {
      this.$emit("exportReport", this.checkedList);
    },

    handleSizeChange(val) {
      // console.log(val);
    },
    // handleCurrenChange(val) {
    //   this.getCurrentPage(val);
    // },
    handleSort() {
      this.timeSort = !this.timeSort;
      this.$emit("getSort", this.timeSort);
    },
    handleGoDetail(item) {
      let url = this.$router.resolve({
        name: "ConsultDetail",
        query: {
          id: item.id,
        },
      });
      window.open(url.href, "_blank");
    },
    getCurrentPage(val) {
      // console.log(val);
      this.$emit("getCurrentPage", val);
    },
    handleSplitTime(val) {
      return moment(val).format("YYYY-MM-DD");
    },
    shortWord(val) {
      if (val && val.length > 0) {
        if (val.length < 20) {
          return val;
        } else {
          return (val = val.substring(0, 20) + "...");
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  em {
    color: #ff8c00 !important;
  }
}
.title-p {
  padding: 0 0.05rem;
  height: 0.4rem;
  span {
    line-height: 0.4rem;
    font-size: 0.12rem;
    color: #333;
  }
  .sort {
    cursor: pointer;
  }
}
.card {
  .gxtj {
    font-size: 16px;
    color: $mainColor;
    margin-bottom: 20px;
  }
  ul {
    position: relative;
    top: -0.2rem;
  }
  li {
    border-bottom: 0.01rem solid #e5e5e5;
    padding: 0.1rem 0.1rem 0 0.15rem;
    position: relative;
    .checkboxItem {
      position: absolute;
      left: -0.1rem;
      top: 0.18rem;
    }

    .liTitle {
      display: flex;
      align-items: center;
      height: 0.4rem;
      color: #333;
      font-size: 0.16rem;
      cursor: pointer;
      justify-content: space-between;
      .title-img {
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 10px;
      }
      .liTitle-title {
      }
      .collect {
        cursor: pointer;
        font-size: 0.2rem;
        position: relative;
        top: 1px;
      }
      .el-icon-star-on {
        color: $color120;
        font-size: 0.24rem;
      }
    }
    .txtContent {
      width: 100%;
      margin-bottom: 0.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #a8a8b6;
      font-size: 0.14rem;
    }
    .keyWordWrap {
      padding: 0.05rem 0 0.1rem;
      overflow: hidden;
      .el-tag {
        margin-right: 0.1rem;
        font-size: 0.12rem;
      }
      .lWrap {
        float: left;
      }
      .rWrap {
        float: right;
      }
    }
  }
  .paginationWrap {
    height: 0.6rem;
    // float: right;
    margin-right: 0.2rem;
  }
}
.downloadReport {
  margin-left: 0.3rem;
}
.flLeft {
  float: left;
}
.flRight {
  float: right;
}
.el-card__body {
  padding: 0.3rem;
}
.nodata {
  text-align: center;
}
.no-data-search {
  text-align: center;
  img {
    width: 150px;
  }
}
</style>
